<template>
  <a-modal
    :centered="true"
    title="增量类型"
    :visible="visible"
    :bodyStyle="{height: modalHeight()}"
    :width="modalWidth()"
    @cancel="dispose"
    @ok="handleOk"
    okText="确定"
    cancelText="取消"
    class="update-modal">
    <div :style="modalStyle()">
      <a-form :form="task2Form">
        <a-form-item
          label="增量对象"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-select
            @change="(v)=>onContentChange(v)"
            :disabled="disabled"
            placeholder="请选择内容"
            v-decorator="['incrementObj', {rules: [{required: true, message: '请选择内容!!'}]}]">
            <a-select-option
              v-for="(it) in increments"
              :key="'a_'+it.id"
              :value="it.id">
              {{ it.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          style="margin-top: 6px"
          label="增量类型"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-select
            @change="(v)=>this.incrementType=v"
            v-decorator="['incrementType', {rules: [{ required: true, message: '请选择增量类型！' }]}]"
            placeholder="请选择增量类型"
            style="width: 100%"
          >
            <a-select-option v-for="(item,j) in incrementList" :key="j" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-row v-if="incrementType==='主键增量'" :gutter="24">
          <a-col :span="12">
            <a-form-item
              :labelCol="centerLabelCol"
              :wrapperCol="centerWrapperCol"
              label="增量参数"
            >
              <a-input
                v-decorator="['incrementParams', {rules: [{required: true, message: '请输入增量参数!'}]}]"
                placeholder="请输入增量参数" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :labelCol="centerLabelCol"
              :wrapperCol="centerWrapperCol"
              label="增量开始ID"
            >
              <a-input
                :max-length="64"
                @blur="startIdChange"
                v-decorator="['incrementStartId', {rules: [{ required: true,message: '请输入增量开始ID!'}]}]"
                placeholder="请输入增量开始ID" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider v-if="incrementType==='时间增量'">时间增量设置</a-divider>
        <a-row v-if="incrementType==='时间增量'" :gutter="24">
          <a-col :span="12">
            <a-form-item
              :labelCol="centerLabelCol"
              :wrapperCol="centerWrapperCol"
              label="增量参数"
            >
              <a-input
                v-decorator="['incrementParams', {rules: [{required: true, message: '请输入增量参数!'}]}]"
                placeholder="请输入增量参数" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :labelCol="centerLabelCol"
              :wrapperCol="centerWrapperCol"
              label="增量开始时间"
            >
              <a-date-picker
                placeholder="请选择增量开始时间"
                mode="time"
                v-decorator="['incrementStartTime']"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                :showTime="true"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="incrementType==='时间增量'" :gutter="24">
          <a-col :span="12">
            <a-form-item
              :labelCol="centerLabelCol"
              :wrapperCol="centerWrapperCol"
              label="增量日期格式"
            >
              <a-input
                v-decorator="['incrementTimePattern', {rules: [{required: true, message: '请输入增量日期格式!'}]}]"
                placeholder="请输入增量日期格式" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

  </a-modal>
</template>

<script>

import { register } from '@/utils/drag_modal'

export default {
  data() {
    return {
      visible: false,
      task2Form: this.$form.createForm(this),
      modalStyle() {
        return {
          'overflow-y': 'overlay',
          'overflow-x': 'hidden',
          'height': '100%',
          'max-height': '100%',
          'padding-right': '9px'
        }
      },
      modalHeight() {
        return (document.body.clientHeight * 0.7) + 'px'
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 21 }
      },
      centerLabelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      centerWrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 }
      },
      incrementType: undefined,
      incrementList: ['无', '主键增量', '时间增量'],
      increments: [],
      disabled: false,
      contentName: undefined
    }
  },
  methods: {
    onContentChange(id) {
      const tmp = this.increments.find((i) => i.id === id)
      this.contentName = tmp ? tmp['name'] : undefined
    },
    modalWidth() {
      return document.body.clientWidth * 0.45
    },
    show(params) {
      this.visible = true
      this.incrementType = params['incrementType']
      this.increments = params['list']
      this.disabled = params['edit']
      register(true)
      if (params.incrementType === '无') {
        this.$nextTick(() => {
          this.task2Form.setFieldsValue(
            {
              incrementType: params.incrementType,
              incrementObj: params.id
            }
          )
        })
      } else {
        this.$nextTick(() => {
          const time = this.parseTime(params.incrementStartTime)
          this.task2Form.setFieldsValue(
            {
              incrementType: params.incrementType,
              incrementTimePattern: params.incrementTimePattern,
              incrementParams: params.incrementType === '时间增量' ? params.timeIncrementCol : params.idIncrementCol,
              incrementStartId: params.incrementStartId,
              incrementStartTime: time,
              incrementObj: params.id
            }
          )
        })
      }
    },
    startIdChange(e) {
      const { value } = e.target
      const formatValue = value.replace(/[^0-9]/ig, '')
      this.task2Form.setFieldsValue({
        'incrementStartId': formatValue
      })
    },
    dispose() {
      this.task2Form.resetFields()
      register(false)
      this.visible = false
    },
    parseTime(time) {
      if (time) {
        return time
      } else {
        return this.$moment(new Date())
      }
    },
    handleOk() {
      this.task2Form.validateFields((errors, values) => {
        if (!errors) {
          for (const key in values) {
            if (typeof (values[key]) === 'object') {
              values[key] = JSON.stringify(values[key])
            }
          }
          values['timeIncrementCol'] = values['incrementParams']
          values['idIncrementCol'] = values['incrementParams']
          values['name'] = this.contentName
          this.$emit('ok', values)
          this.dispose()
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
